<style type="text/css" rel="stylesheet">
    @import url("../templates/table.css");
    @import url("../templates/playlist.css");
</style>
<script type="text/javascript" src="../project/javascript/playlist.js"></script>

<form name="playlist" action="../project/playlist.class.php"  method="post">
    <table id="pltable">
        <tr id="first_line"> <td>Photo:</td> <td>Artist:</td> <td>Title:</td> <td>Track</td> <td>Year:</td> <td>Album:</td><td>{if $content == 5} Public: {else if $content == 7} Playlist: {/if}</td> </tr>
        {foreach from=$songs item=song}
            <tr class ="create_playlist" onmouseover="this.className='underline_create_playlist'">
                <td onclick='playsong(this.parentNode.rowIndex);'><img src="{$song['image']}" alt="{$song['title']}" width ="30" height="30"></td>
                     <td onclick='playsong(this.parentNode.rowIndex);'>{$song["artist"]}</td>
                     <td id = "title" onclick='playsong(this.parentNode.rowIndex);'>{$song["title"]}</td>
                     <td onclick='playsong(this.parentNode.rowIndex);'>{$song["track"]}</td>
                     <td onclick='playsong(this.parentNode.rowIndex);'>{$song["year"]}</td>
                     <td onclick='playsong(this.parentNode.rowIndex);'>{$song["album"]}</td>
                     {if $content == 5}
			 <td>
			     <input type="checkbox" name="{$song["id"]}" value="public"
				    {if $song["public"] == '1'}
					checked="checked"
				    {/if}
				    onClick="changePublic(this.name, this.checked);"/>
			 </td>
			 <td onClick="delete_song({$song["id"]});"> <button type="button" name="delete_song"> Delete </button> </td>
		    {else if $content == 7}
			 <td>
			    <select id="{$song["id"]|cat:"selected_option"}">
				<option SELECTED>Select an option...</option>
				{foreach from=$playlists item=playlist}
				    <option> {$playlist} </option>
				{/foreach}
			    </select>
			 </td>
			 <td onClick="move_to_playlist({$song["id"]});"> <button type="button" name="add_song"> Add </button> </td>
		    {else if $content == 2}
			 <td onClick="remove_from_playlist({$song["id"]})"><button type="button" name="remove_from_playlist">Remove</button>
			 </td>
		    {/if}
            </tr>
        {/foreach}    
    </table>
    {if $content == 7}
        <table>
              <tr>
                  <td>
                      <form action="searchSong" id="searchForm">
                      <input type="text" id="searchBar" onkeyup="printSuggestions(this.value)"
                        placeholder="Search song..." />
                      </form>
                  </td>
              </tr>
              <tr>
                  <td>
                      <div id="searchResults"></div>
                  </td>
              </tr>
          </table>
    {/if}
    <br><br>

</form>